// body缩放且居中
// 设置全局样式html和body样式为 宽1920px 高1080px 并且超出部分全部隐藏

/**
 * {
	margin: 0;
	padding: 0;
};

 html{
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
	background-image: url("~@/assets/img/body-bg.png");
	background-size: 100% 100%;
}

 body{
	width: 1920px !important;
	height: 1080px !important;
	overflow: hidden !important;
  position: relative !important;
}

 */

export const globalRatio = {
  width: 1,
  height: 1,
};

// * 设计稿尺寸（px）
const baseWidth = 1920;
const baseHeight = 1080;

// * 需保持的比例（默认0.5625）
const baseProportion = parseFloat((baseHeight / baseWidth).toFixed(5));

export function bodyRatioCenter(win: Window) { // 这里之所以加入传入，可能存在iframe时要用
  const body = document.body;

  function refreshScale() {
    const run = () => {
      // 当前宽高比
      const currentRate = parseFloat(
        (window.innerHeight / window.innerWidth).toFixed(5)
      );
      if (currentRate < baseProportion) {
        // 表示更宽
        globalRatio.width = globalRatio.height = Number(
          (window.innerHeight / baseHeight).toFixed(5)
        );
        const translateX =
          (window.innerWidth - globalRatio.width * baseWidth) /
          2 /
          globalRatio.width +
          "px";
        body.style.transform = `scale(${globalRatio.width}) translateX(${translateX}) translateY(0px)`;
      } else {
        // 表示更高
        globalRatio.height = globalRatio.width = Number(
          (window.innerWidth / baseWidth).toFixed(5)
        );
        const translateY =
          (window.innerHeight - globalRatio.width * baseHeight) /
          2 /
          globalRatio.width +
          "px";
        body.style.transform = `scale(${globalRatio.width}) translateX(0px) translateY(${translateY})`;
      }
      body.style.transformOrigin = `top left`;
    };
    setTimeout(() => {
      run();
    }, 10);
  }

  refreshScale();

  win.addEventListener(
    "pageshow",
    function (e) {
      if (e.persisted) {
        // 浏览器后退的时候重新计算
        refreshScale();
      }
    },
    false
  );
  win.addEventListener("resize", refreshScale, true);
}

/**
 记录：这里的代码进行缩放了body居中，但是在使用elementui的时候会出现下拉定位无法正确定位
 这种问题的解决的方案就是
 不对body进行缩放而是对#app这个元素进行缩放，并且添加一个全局css变量存在这个缩放，
 最后用class去强制修改生成在body在下面弹框的样式和统一缩放
 列子：
 :root{
	--pageScale: 1;
}
 document.documentElement.style.setProperty('--pageScale', widthRatio);
 .el-popper{
	transform: scale(var(--pageScale)) !important;
	transform-origin:left top !important;
}
 .el-tooltip__popper{
	transform: scale(var(--pageScale)) !important;
}
 .el-dialog__wrapper{
	transform-origin:left top !important;
	transform: scale(var(--pageScale)) !important;
	width: 1920px;
	height: 1080px;
}
 这样就可以很好的解决问题
 */
